import {quillEditor} from 'vue-quill-editor'
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline'],
    ['blockquote', 'code-block'],
    [{'header': 1}, {'header': 2}],
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'indent': '-1'}, {'indent': '+1'}],
    [{'size': ['small', false, 'large', 'huge']}],
    [{'color': []}, {'background': []}],
    [{'font': []}],
    ['image'],
];

export default {
    components: {
        quillEditor
    },
    data() {
        return {
            type: 1,
            activity_id: 0,
            ruleForm: {
                content: "",
                tel:""
            },
            postData: {},			                            //七牛云postData
            domain: '',				                            //图片域名
            // 富文本编辑器配置
            header: {token: sessionStorage.token},              //有的图片服务器要求请求头需要有token之类的参数，写在这里
            editorOption: {
                placeholder: '',
                theme: 'snow',                                  //样式
                modules: {
                    toolbar: {
                        container: toolbarOptions,              //工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    document.querySelector('.avatar-uploader input').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },
            uploadData:{},
        }
    },


    //进入页面加载
    mounted: function () {
        var that = this;
        //在缓存中获取值
        that.user_name = sessionStorage.getItem("user_name");
        that.user_id = sessionStorage.getItem("user_id");
        that.token = sessionStorage.getItem("access-token");
        if ((!that.token) || (!that.user_id) || (!that.user_name)) {
            that.$router.push('/login');
        }
        that.getQiNiuToken();
        that.aboutUs();
    },

    //方法
    methods: {
        //请求api
        submitForm(formName) {
            var that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.addAboutUs();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //获取七牛云token
        getQiNiuToken: function () {
            var that = this;
            //请求登陆接口
            that.$http.post(that.adminApi.api_url + "/Qiniu/getToken", {
                token: that.token,
            }, {
                emulateJSON: true
            }).then(
                function (res) {
                    // 处理成功的结果
                    that.postData = {
                        token: res.body.upToken,
                    }
                    that.domain = res.body.domain;
                },
                function () {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },
        //富文本信息
        onEditorReady(editor) {
        },
        //编辑时动态获取
        onEditorChange({editor, html, text}) {
            var that = this;
            that.ruleForm.desc = html;
        },
        PictureCardPreview(file) {
            console.log(file);
        },
        //上传成功
        AvatarSuccess(res, file) { //上传成功后在图片框显示图片
            var that = this;
            // 获得文件上传后的URL地址
            var url = that.domain + res.key;
            if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
                let value = url
                // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
                that.addRange = that.$refs.myQuillEditor.quill.getSelection();
                value = value.indexOf('http') !== -1 ? value : 'http:' + value;
                that.$refs.myQuillEditor.quill.insertEmbed(that.addRange !== null ? that.addRange.index : 0, 'image', value, Quill.sources.USER) // 调用编辑器的 insertEmbed 方法，插入URL
            } else {
                that.$message.error(`${that.uploadType}插入失败`)
            }
        },

        //返回关于我们
        aboutUs:function () {
            var that = this;
            //请求的数据
            var formData = {};
            formData.token = that.token;
            //请求
            that.$http.post(that.adminApi.api_url + "/Config/about_us", formData, {
                emulateJSON: true
            }).then(
                function(res) {
                    that.ruleForm.content = res.body.about_us;
                },
                function() {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },

        //添加关于我们
        submitForm:function () {
            var that = this;
            //请求的数据
            var formData = {};
            formData.token = that.token;
            formData.about_us = that.ruleForm.content;
            //请求邀请者列表
            that.$http.post(that.adminApi.api_url + "/Config/add_about_us", formData, {
                emulateJSON: true
            }).then(
                function(res) {
                    // 处理成功的结果
                    that.$message({
                        type: 'success',
                        message: `操作提示: ${ '添加成功' }`
                    });
                    that.aboutUs();
                },
                function() {
                    // 处理失败的结果
                    that.$message({
                        type: 'error',
                        message: `操作提示: ${ '处理异常' }`
                    });
                });
        },
    }
}